//个人认证
import React, {createRef} from "react"
import ContentView from "../../components/ContentView"
import {List,InputItem,Picker,} from "antd-mobile"
import './index.scss'
export default class PersonalCertificate  extends React.Component{
        constructor (props) {
                super (props);
                this.pictureUploadFront = createRef()
                this.pictureUploadBack = createRef()
        }
        uploadBindClick = (type)=>{
                const refDom = {
                        front:this.pictureUploadFront,
                        back:this.pictureUploadBack
                }
                refDom[type].current.click()
        }
        handleOnUpload=(e)=>{
                setTimeout(()=>{
                        console.log(this.pictureUploadFront.current.files)
                },100)
        }
        render () {
                return <ContentView title='认证'>
                        <div className="form-content">
                                <List>
                                        <Picker
                                                data={[]}
                                                value={null}
                                                cols={1}
                                        >
                                                <List.Item arrow="horizontal">账号类型</List.Item>
                                        </Picker>
                                        <Picker
                                                data={[]}
                                                value={null}
                                                cols={1}
                                        >
                                                <List.Item arrow="horizontal">认证证件</List.Item>
                                        </Picker>
                                        <InputItem
                                                clear
                                                style={{textAlign:"right"}}
                                                placeholder='请输入真实姓名'>真实姓名</InputItem>
                                        <InputItem
                                                clear
                                                style={{textAlign:"right"}}
                                                placeholder='请输入证件号码'>证件号码</InputItem>
                                        <List.Item>
                                                拍摄证件
                                                <List.Item.Brief>
                                                        <div className="picture-upload">
                                                                <div className="upload-item">
                                                                        <div className="upload-item-inner" onClick={this.uploadBindClick.bind(this,'front')}>拍摄正面</div>
                                                                        <input
                                                                                ref={this.pictureUploadFront}
                                                                                type="file"
                                                                                accept="image/*"
                                                                                style={{display:"none"}}
                                                                                onChange={this.handleOnUpload}/>
                                                                </div>
                                                                <div className="upload-item">
                                                                        <div className="upload-item-inner" onClick={this.uploadBindClick.bind(this,'back')}>拍摄背面</div>
                                                                        <input ref={this.pictureUploadBack} type="file" name="" style={{display:"none"}}/>
                                                                </div>
                                                        </div>
                                                </List.Item.Brief>
                                        </List.Item>
                                </List>
                        </div>
                </ContentView>
        }

}
